<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSQL演示</title>
</head>
<body>
        id:<input type="text" size="10" maxlength="30" id="id1"><br/>
        log:<input type="text" size="10" maxlength="30" id="log2">
        <button type="button" onclick="iniDB()">初始化</button>
        <button type="button" onclick="deleteTB()">删除表</button>
        <button type="button" onclick="selectAll()">查询所有</button>
        <button type="button" onclick="selectOne()">查询某个</button>
        <button type="button" onclick="addOne()" >增加1个</button>
        <button type="button"  onclick="updateOne()" >更新某个</button>
        <div id="status"></div>
        <div id="tableInfo"></div>
</body>
    <script>
        // window.console = window.console || (function () {
        //     var c ={};
        //     c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile= c.clear = c.exception = c.trace = c.assert = function(){};
        //     return c;
        // })();
        function getId(){
            //界面这种方式获得的是字符串，不是数字，而数据库中用的是数字，所以匹配失败，因此要转换
            var idValue= document.getElementById("id1").value
            idValue=parseInt(idValue);
            return idValue;
        }
        function getLog(){
            var logValue= document.getElementById("log2").value
            return logValue;
        }
        function printInfo(elId,str,ifAdd){
            if(true==ifAdd)
                document.getElementById(elId).innerHTML+=str;
            else
                document.getElementById(elId).innerHTML=str;
        }
        console.log("aaaaaa");
        function showData(data){
            var elDiv=document.getElementById("tableInfo");
            var elTable=document.createElement('table');
            elDiv.appendChild(elTable);
            var elTr=document.createElement('tr');
            elTable.appendChild(elTr);
            elTr.innerHTML='<td>'+"id"+"</td>";
            elTr.innerHTML+='<td>'+"log"+"</td>";
            for(var i=0; i<data.length; i++){
                var elTr=document.createElement('tr');
                elTable.appendChild(elTr);
                elTr.innerHTML='<td>'+data[i].id+"</td>";
                elTr.innerHTML+='<td>'+data[i].log+"</td>";
            }
        }
        // 显示数据测试用
        // var data=[{id:1,log:"aaaaaa"},{id:2,log:"bbbbbbb"},
        //     {id:3,log:"cc"},{id:4,log:"dd"},{id:5,log:"ee"}];
        // showData(data);
        // printInfo("status","dasdasdfasdf");

        var db;
        /**
         * 初始化我们的数据库，并且将DB中插入几条演示数据         *
         */
        function iniDB(){
            db= openDatabase('mydb22', '1.0', 'Test DB', 4 * 1024 * 1024);
            db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "aa")',
                    [],
                    function (){
                        var msg = '<p>数据表已创建，且插入了两条数据。</p>';
                        printInfo('status',msg);
                    },
                    function (){
                        printInfo('status',"插入失败");
                    }
                );
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "bb")');
            });
        }
        function deleteTB(){
            db.transaction(function (tx) {
                tx.executeSql('drop TABLE IF  EXISTS LOGS',[],
                    function (){printInfo('status',"删除成功");},
                    function (){printInfo('status',"删除失败");}
                    );
            });
        }
        function selectAll(){
            // var msg="db="+db;
            // printInfo('status',msg);
            db.transaction(function (tx) {
                tx.executeSql('SELECT * FROM LOGS order by id', [],
                    function(tx, results){
                        // var msg="results="+results;
                        // printInfo('status',msg,true);
                        var data = results.rows;
                        var len=results.rows.length;
                        var msg="len="+len;
                        printInfo('status',msg,true);
                        console.log("data=");
                        console.log("data=");
                        console.log("data=");
                        console.log("data="+data);
                        showData(data);
                    },
                    function () {
                        logDebug('查找失败');
                    });
            });
        }

        /**
         * 查询某个记录
         */
        function selectOne(){
            db.transaction(function (tx) {
                // var msg="SELECT * FROM LOGS  where id="+getId()+"  order by id"
                // printInfo('status',msg,true);
                tx.executeSql('SELECT * FROM LOGS  where id=? order by id ', [getId()],
                    function(tx, results){
                        // var msg="results="+results;
                        // printInfo('status',msg,true);
                        var data = results.rows;
                        var len=results.rows.length;
                        var msg="len="+len;
                        printInfo('status',msg,true);
                        // console.log("data=");
                        // console.log("data=");
                        // console.log("data=");
                        // console.log("data="+data);
                        showData(data);
                    },
                    function () {
                        logDebug('查找失败');
                    });
            });
        }
        function addOne(){
            db.transaction(function (tx) {
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (?, ?)',
                    [getId(), getLog()],
                    function (){
                        var msg = '<p>数据表已创建，且插入了1条数据。</p>';
                        printInfo('status',msg);
                    },
                    function (){
                        printInfo('status',"插入失败");
                    }
                );
            });
        }
        function updateOne(){
            db.transaction(function (tx) {
                tx.executeSql('update LOGS set  log=? where  id=?',
                    [getLog(), getId()],
                    function (){
                        var msg = '<p>数据表已创建，且更新了1条数据。</p>';
                        printInfo('status',msg);
                    },
                    function (){
                        printInfo('status',"插入失败");
                    }
                );
            });
        }
    </script>
</html>